.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    background-color: #fff;
    overflow: hidden;
    border-radius: 2px;
}

.stripes{
    position: relative;
    top: -67px;
    left: -100px;
    width: 600px;
    transform: rotate(45deg);
    .stripe{
        background-color: #353535;
        width: 600px;
        height: 3px;
        margin-bottom: 16px;
    }
}

.center{
    position: absolute;
    width: 260px;
    height: 260px;
    inset: 0;
    margin: auto;
    background-color: #353535;
    border-radius: 3px;
    box-shadow: 8px 10px 15px rgba(0,0,0,0.3);
}

.polygon{
    position: absolute;
    width: 160px;
    height: 140px;
    inset: 0;
    margin: auto;

    .light{
        fill: #eee;
        transition: all .5s ease-in-out;
    }

    .middle{
        fill:#ccc;
        transition: all .5s ease-in-out;
    }

    .dark{
        fill:#aaa;
        transition: all .5s ease-in-out;
    }

    &:hover{
        .light{
            fill: #aaa;
        }
        .middle{
            fill:#eee;
        }
        .dark{
            fill: #ccc;
        }
    }
}